<template>
  <div id="app">
    <div class="container">
        <div class="page-header">
            <h1>路由组件的练习</h1>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <!-- Nav tabs -->
            <ul class="nav nav-stacked col-md-6" role="tablist">
                <li role="presentation" class="active">
                    <!-- 声明式导航 router-link 会被浏览器解析为一个a标签 -->
                    <router-link to="/home"  aria-controls="home" role="tab"  data-toggle="tab" >Home</router-link>
                </li>
                <li role="presentation">
                    <router-link to="/about"  aria-controls="About" role="tab" data-toggle="tab" >About</router-link>
                </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content col-md-6">
               <!-- 一级路由 Home 和 About -->

               <!-- 缓存 Home 组件和 About组件  -->
               <!--  路由组件切换是会被销毁的 ！！！ -->

               <!-- 1.缓存所有组件 -->
               <keep-alive>
                    <router-view></router-view>
               </keep-alive>

               <!-- 2.缓存一个组件 -->
               <!-- include="组件名" 包含 -->
               <!-- <keep-alive include="Home">
                    <router-view></router-view>
               </keep-alive> -->

                <!-- 3.缓存多个组件 用数组  记得动态绑定 :include='['组件名1','组件名2']'   -->
                <!-- include="组件名" 包含 -->
                <!-- <keep-alive :include="['Home','About']">
                    <router-view></router-view>
                </keep-alive> -->

                <!-- 4.不缓存某个组件 -->
                <!-- exclude="组件名" 排除 -->
                <!-- <keep-alive exclude="Home">
                    <router-view></router-view>
                </keep-alive>  -->

                <!-- 5.不缓存多个组件 用数组  记得动态绑定 :exclude='['组件名1','组件名2']'   -->
                <!-- exclude="组件名" 包含 -->
                <!-- <keep-alive :exclude="['Home','About']">
                    <router-view></router-view>
                </keep-alive> -->


            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style scoped>

.router-link-active{
    /* 背景高亮 类名 */
    background-color: skyblue  !important; 
}
</style>

<!-- 
    vue-router 使用
    一级路由
        - <router-view></router-view>
        - <router-link></router-link>
    重定向一级路由和背景高亮 类名
    二级路由动态渲染
    三级静态
    传参 params传参和query传参
    params传参注意点 1 2 3
    to写字符串和写对象 传参
    命名路由 name
    props的作用：在组件中使用方便 
    props写布尔值 写对象 写函数
    
    <router-view></router-view> 声明式导航有一些局限性
        1. router-link本质就会渲染为一个a标签 如果咱们向点击button、h1、p 结构也不想被打断 不能用它了
        2. 跳转前如果想做一些自己的逻辑 插手不进去
    编程式导航 自己去跳 需要借助路由器对象身上的两个方法 push replace
        push方法和replace方法调用传递的参数和to属性一样
        push 是增加一条历史记录
        replace 替换掉当前最新的历史记录的
        router-link 本质也是用的push方法 所以会增加一条历史记录
    步骤 
    1.给按钮添加@click="handler(item)"
    2.handler回调中接收item 把item中的id，title传给上级路由组件，通过$router.push 编程式导航添加一条 
        //  点击按钮 跳转去三级路由
        handler(item){
            // $router.push 和 $router.replace 用法和to一样
            this.$router.push({
                name:'newsdetail',
                params:{
                    id:item.id,
                },
                query:{
                    title:item.title,
                }
            })
        }
    3.在注册路由组件时 配置params参数的占位符和props写函数传参
    4.在接收组件中 props:['id','title']  在模板中使用id title

    通过$router.replace 编程式导航替换路径
    <keep-alive></keep-alive>  Vue提供的缓存组件  include  exclude  （不）缓存多个用数组  
    组件名作用   name:''
        1.在调试工具中可以通过组件名查看都组件信息和搜索组件
        2.Vue.component(Button.name, Button) 注册组件时第一个参数是组件名，第二个定义组件返回的构造函数
        3.在缓存组件时 使用include属性和exclude属性时，属性值是组件名
    

    hash模式和history模式
    区别？原理？
        1.hash和history 带不带#的区别
        2. # 区分前台路由和后台路由   后台路由==>发送请求的地址   前台路由==>切换组件
    后端路由和前端路由？
    vue-router默认是hash模式 
    修改history模式  mode:'history' 应该是发送请求，找不到资源404 vue给我们处理了

 -->